<template>
  <div class="home">
    <Header :isFixed="isFixed"></Header>
    <div class="container" :class="isFixed ? 'mgtop' : ''">
      <div class="container_banner">
        <Jumbotron></Jumbotron>
      </div>
      <div class="container_search">
        <SearchControl :data="keywords"></SearchControl>
      </div>
      <div class="container_title">
        <TitleControl
          title="Hotspot"
          desc="Recommended Hotspots"
        ></TitleControl>
      </div>
      <div class="container_category">
        <CategoryControl :data="categoryData"></CategoryControl>
      </div>
      <div class="container_title">
        <TitleControl title="List" desc="Product List"></TitleControl>
      </div>
      <div class="container_list">
        <ListControl :data="listData"></ListControl>
      </div>
      <div class="container_title">
        <TitleControl
          title="Service"
          desc="We help businesses bring ideas to life in the digital world, by
          designing and implementing the technology tools that they need to win."
          className="double"
        ></TitleControl>
      </div>
      <div class="container_service">
        <PlateControl :data="serviceData"></PlateControl>
      </div>
      <div class="container_swipe">
        <SwipeControl :data="swipeData"></SwipeControl>
      </div>
      <div class="container_title">
        <TitleControl title="Union" desc="Union List"></TitleControl>
      </div>
      <div class="container_media">
        <MediaListControl :data="mediaData"></MediaListControl>
      </div>
      <div class="container_aboutme">
        <AboutMeControl></AboutMeControl>
      </div>
    </div>
    <Footer></Footer>
  </div>
</template>

<script>
export default {
  name: "Home",
  props: {
    isFixed: {
      type: Boolean,
      default() {
        return false;
      },
    },
  },
  data() {
    return {};
  },
  components: {
    Header: () =>
      import(
        /* webpackChunkName:'header' */ "@/components/header/components/index.vue"
      ),
    Footer: () =>
      import(
        /* webpackChunkName:'footer' */ "@/components/footer/components/index.vue"
      ),
    Jumbotron: () =>
      import(
        /* webpackChunkName:'jumbotron' */ "@/components/jumbotron/components/index.vue"
      ),
    SearchControl: () =>
      import(
        /* webpackChunkName:'searchControl' */ "@/components/searchControl/components/index.vue"
      ),
    TitleControl: () =>
      import(
        /* webpackChunkName:'titleControl' */ "@/components/titleControl/components/index.vue"
      ),
    CategoryControl: () =>
      import(
        /* webpackChunkName:'categoryControl' */ "@/components/categoryControl/components/index.vue"
      ),
    ListControl: () =>
      import(
        /* webpackChunkName:'listControl' */ "@/components/listControl/components/index.vue"
      ),
    PlateControl: () =>
      import(
        /* webpackChunkName:'plateControl' */ "@/components/plateControl/components/index.vue"
      ),
    SwipeControl: () =>
      import(
        /* webpackChunkName:'swipeControl' */ "@/components/swipeControl/components/index.vue"
      ),
    MediaListControl: () =>
      import(
        /* webpackChunkName:'mediaListControl' */ "@/components/mediaListControl/components/index.vue"
      ),
    AboutMeControl: () =>
      import(
        /* webpackChunkName:'aboutMeControl' */ "@/components/aboutMeControl/components/index.vue"
      ),
  },
  created() {
    let arr = [];
    for (let i = 0; i < 5; i++)
      arr.push({
        name: i,
        path: "/search/:key",
        params: {
          key: i,
        },
      });
    this.keywords = [...arr];

    let listArr = [];
    for (let i = 0; i < 6; i++)
      listArr.push({
        name: i,
        desc: "Detailed Description of Card Content.",
        path: "/categrory/detail/:id",
        params: { id: i },
      });
    this.listData = [...listArr];

    let swipeArr = [];
    for (let i = 0; i < 9; i++)
      swipeArr.push({
        name: i,
        desc: "I have been waiting for this update for a long time but the work provided was really worth it. Thank you for providing quality work even if it sometimes takes a long time.",
        auth: "Jérôme, Keen Customer",
      });
    this.swipeData = [...swipeArr];

    let mediaArr = [];
    for (let i = 0; i < 9; i++)
      mediaArr.push({
        title: "es-media heading",
        desc: "Will you do the same for me? It's time to face the music I'm no longer your muse. Heard it's beautiful, be the judge and my girls gonna take a vote. I can feel a phoenix inside of me. Heaven is jealous of our love, angels are crying from up above. Yeah, you take me to utopia.",
        img: "https://keenthemes.com/keen/assets/media/features-logos/npm.png",
      });
    this.mediaData = [...mediaArr];

    let categroryArr = [];
    for (let i = 0; i < 6; i++)
      categroryArr.push({
        title: "es-media heading",
        count: i,
        avatar:
          "https://keenthemes.com/keen/assets/media/features-logos/npm.png",
        path: "/categrory/detail/:id",
        params: { id: i },
      });
    this.categoryData = [...categroryArr];

    let serviceArr = [];
    for (let i = 0; i < 4; i++)
      serviceArr.push({
        title: "Front - Multipurpose Responsive Template",
        subTitle: "Landing & Corporate",
        desc: `Super clean, minimalistic, stylized mockup collection with
                  awesome customization features and huge resolution.`,
        tag: "Front-end",
        img: "https://htmlstream.com/preview/front-v4.3.1/assets/img/1200x900/img1.jpg",
        path: "/categrory/detail/:id",
        params: { id: i },
      });
    this.serviceData = [...serviceArr];
  },
};
</script>

<style lang="scss">
.home {
  .container {
    padding: 0.625rem 0.9375rem;
    &.mgtop {
      margin-top: 3.5rem;
    }
    .container_banner {
    }
    .container_search {
    }
    .container_title {
    }
    .container_list {
    }
    .container_swipe {
    }
    .container_media {
    }
    .container_aboutme {
    }
    .container_category {
    }
    .container_service {
    }
  }
}
</style>
